<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hua rong dao</title>
<link href="css/hrd.css" rel="stylesheet" type="text/css">
<link href="css/popup.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/hrd.js"></script>
<script type="text/javascript" src="js/hrd_route.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<script type="text/javascript">
	window.onload = function() {
		var stepNoObj = document.getElementById('stepNo');
		var btn_playback = document.getElementById('btn_replay');
		var btn_restart = document.getElementById('btn_restart');
		var btn_demo = document.getElementById('btn_demo');
		
		var game = new Game('main', {
			onFinish : function(g) {
				var dialog = Popup.newDialog('恭喜你，通关啦!');
				dialog.show();
				btn_playback.disabled = false;
			},

			onMoveBlock : function(g) {
				stepNoObj.innerHTML = g.stepNo;
			}
		});
		
		var playback = null;

		btn_playback.onclick = function() {
			if (playback) {
				playback.stop();
			}
			playback = new PlayBack(game);
			playback.play(game.history);
		}

		btn_restart.onclick = function() {
			if (playback) {
				playback.stop();
			}
			stepNoObj.innerHTML = 0;
			btn_playback.disabled = true;
			game.restart();
		}
		
		btn_demo.onclick = function() {
			if (playback) {
				playback.stop();
			}
			game.stop();
			playback = new PlayBack(game);
			playback.play(Routes.level1);
		}

		game.start();
		btn_playback.disabled = true;
	};
</script>
</head>
<body>
	<div class='gameborder'>
		<div id="main" class="mainboard"></div>
		<div class='bottom'>
			<table class='bottom_table'>
				<tr>
					<td class='cell_name'><span id='gameName'>华容道</span></td>
					<td class='cell_step'><span id='stepNo'>0</span></td>
					<td class='cell_buttons'>
					<input type="button" id='btn_replay' value='回放'>
					<input type="button" id='btn_restart' value='重来'>
					<input type='button' id='btn_demo' value='演示'>
					</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>